import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// import './index.scss'
// import classNames from 'classnames'
import styles from './index.module.scss'
import { getCurrentRouter } from '@/utils/utils'
import { INDEX_APP_CONFIG, TAB_BAR_CONFIG, TAB_BAR_HEIGHT } from '@/config/config'
import { getCommonSonConfig } from '@/api/systemApi'
import { getGlobalData, setGlobalData } from '@/utils/storage'
import {FyImg} from "@/components/index";

const prefixCls = 'tab-bar'

const formatUrl = (url = '') => url.replace(/\?[\S]*/, '')
export default class TabBar extends Component {
  state: any
  constructor() {
    super(...arguments)
    this.state = {
      list: [],
      active: ''
    }
  }

  componentWillMount() {
    this.getList()
  }

  //  获取 tab-bar 列表
  getList() {
    const { path } = getCurrentRouter()
    const tabBar = getGlobalData(TAB_BAR_CONFIG)
    if (tabBar) {
      this.setState({
        list: tabBar,
        active: path
      })
    } else {
      getCommonSonConfig(INDEX_APP_CONFIG, TAB_BAR_CONFIG).then(({ data }) => {
        const list = data[TAB_BAR_CONFIG]['items']
        console.log(list)
        this.setState({
          list,
          active: path
        })
        setGlobalData({ [TAB_BAR_CONFIG]: list })
      })
    }
  }

  //  切换 tab-bar
  onSwitch({ url }) {
    const path = this.$router.path
    if (url.indexOf(path) >= 0) {
      return false;
    }

    const list = [
      '/pages/tabbar/home/index',
      '/pages/tabbar/category/index',
      '/pages/tabbar/cart/index',
      '/pages/tabbar/comment/index',
      '/pages/tabbar/user/index',
      '/pages/bindingmobile/index'
    ]
    const ind = list.findIndex(path => path === url)
    if (ind >= 0) {
      Taro.switchTab({ url })
    } else {
      Taro.navigateTo({ url })
    }
  }

  render() {
    const { list, active } = this.state
    // return !!list.length && (<View className={`${prefixCls}__list`} style={{ height: `${TAB_BAR_HEIGHT}px` }}>
    //   {list.map(item => {
    //     return (<View key={item.url} className={`${prefixCls}__item`} onClick={this.onSwitch.bind(this, item)}>
    //       <img src={item.url === active ? item.selectedIcon : item.icon} className={`${prefixCls}__icon`}/>
    //       <View className={`${prefixCls}__text`}>{item.text}</View>
    //     </View>)
    //   })}
    // </View>)
    return list.length > 0 ? (
      <View className={styles[`${prefixCls}__list`]} style={{ height: `${TAB_BAR_HEIGHT}px` }}>
        {list.map(item => {
          // console.log(item.url, formatUrl(item.url))
          return (<View key={item.url} className={styles[`${prefixCls}__item`]} onClick={this.onSwitch.bind(this, item)}>
            <FyImg src={formatUrl(item.url) === active ? item.selectedIcon : item.icon} className={styles[`${prefixCls}__icon`]}/>
            <View className={styles[`${prefixCls}__text`]}>{item.text}</View>
          </View>)
        })}
      </View>
    ) : null
  }
}
